<template>
  <div>
    <h1>直播播放</h1>
    <div id="id_test_video" style="width:100%; height:auto;"   ></div>
    <el-table
      :data="liveList"
      style="width: 100%">
      <el-table-column
        prop="liveTitle"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="liveStatus"
        label="直播状态"
        width="180">
        <template slot-scope="scope" >
          <span v-if="scope.row.liveStatus==0" >未开播</span>
          <span v-if="scope.row.liveStatus==1" >正在直播</span>
          <span v-if="scope.row.liveStatus==2" >已结束</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope" >
          <el-button v-if="scope.row.liveStatus==1" type="primary" @click="lookLive(scope.row.playUrl)" >观看直播</el-button>
          <el-button v-if="scope.row.liveStatus==2" type="primary" @click="seeReplay(scope.row.specialistId)" >回放</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page.sync="pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size.sync="pageSize"
      @size-change="showLiveAll"
      @current-change="showLiveAll">
    </el-pagination>
    <el-dialog
      title="回放列表"
      :visible.sync="dialogVisible"
      width="70%">
      <el-table
        :data="playBackList"
        style="width: 100%">
        <el-table-column
          prop="duration"
          label="开播时长(秒)"
          width="180">
        </el-table-column>
        <el-table-column
          prop="videoUrl"
          label="播放地址"
          width="180">
          <template slot-scope="scope" >
            <a :href="scope.row.videoUrl" >点击播放</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="生成时间">
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>
<script>
import { seeReplay, showLiveAll } from "@/api/course";
export default {
  data(){
    return{
      player:null,
      pageNum:1,
      pageSize:20,
      liveList:[],
      total:0,
      dialogVisible:false,
      playBackList:[]
    }
  },
  mounted() {
    this.showLiveAll()
  },
  methods:{
    seeReplay(specialistId){
      this.dialogVisible=true
      seeReplay(specialistId).then(res=>{
        this.playBackList=res.data
      })
    },
    showLiveAll(){
      showLiveAll(this.pageNum,this.pageSize).then(res=>{
        console.log(res)
        this.liveList=res.data
        this.total=res.total
      })
    },
    lookLive(playUrl){
      this.player =  new TcPlayer('id_test_video', {
        "m3u8":playUrl,
        "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        //stretch：拉伸铺满播放器区域，图片可能会变形
        "poster":{"style":"cover","src":"http://39.107.70.193:8888/group1/M00/00/00/rBzHpGJRXNmAfN0QAABEUSTHybM489.jpg"},
        "width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
        "height" : '320',//视频的显示高度，请尽量使用视频分辨率高度
        "wording": {  //自定义文案。
          2032: "请求视频失败，请检查网络",
          2048: "请求m3u8文件失败，可能是网络错误或者跨域问题",
        },
        "volume":1,  //设置初始音量，范围：0到1
        "live":true,   //设置视频是否为直播类型
        listener:function(msg){
          if(msg.type=='pause'){
            alert('暂停')
          }
        }
      });
    },test1(){
      this.player.load('http://39.107.70.193:8888/group1/M00/00/00/rBzHpGJEXXGAKFMfAIoJ8hl9S4s178.mp4')
    }
  }
}
</script>
<style>

</style>
